const { TestPlugin } = require("./custom-plugins/test-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //打包html的插件
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //提取css的插件

const { resolve } = require("path");

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "src/index.html",
      title: "dev 模式",
      minify: {
        // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true, // 压缩内联css
      },
    }),
    new TestPlugin({
      test: "test",
    }),
    new webpack.HotModuleReplacementPlugin(), // 添加 HMR 插件
    new MiniCssExtractPlugin(),
  ],
  // devtool: "source-map",
  devtool: "eval-source-map",
  // 开发服务器 devServer,用来自动化的构建项目，并提供实时刷新
  // 只会在内存中编译打包，不会有任何输出
  // 使用 devServer 打包后的图片引用报错
  devServer: {
    // 打包后的静态资源目录
    // contentBase: resolve(__dirname, 'dist'), // dev-server 4.0 以前的写法
    static: {
      directory: resolve(__dirname, "dist"), // dev-server 5.0 的写法
    },
    // gzip 压缩
    compress: true,
    // 端口号
    port: 9090,
    open: true,
    // 热模块替换
    hot: true,
  },
};
